<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <link rel="shortcut icon" href="favicon.ico" type="imge/x-icom">
    <link rel="stylesheet" href="./css/dase.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/swiper.min.js"></script>
</head>

<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="./index-登录.html" target="_self">请先登录</a></li>
                <li><a href="./index-注册.html" target="_self">免费注册</a></li>
                <li><a href="./index-个人中心.html" target="_self">我的订单</a></li>
                <li><a href="./index-个人中心.html" target="_self">会员中心</a></li>
                <li><a href="./index-个人中心.html" target="_self">帮助中心</a></li>
                <li><a href="./index-个人中心.html" target="_self">在线客服</a></li>
                <li><a href="./index-个人中心.html" target="_self">手机版</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="backgro">
        <div class="header wrapper">
            <div class="logo">
                <h1><a href="#">小兔鲜儿</a></h1>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">美食</a></li>
                    <li><a href="#">餐厨</a></li>
                    <li><a href="#">电器</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">洗护</a></li>
                    <li><a href="#">孕婴</a></li>
                    <li><a href="#">服装</a></li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="搜一搜">
                <!-- 定位 放大镜 -->
                <span></span>
            </div>
            <a href="./index-个人中心.html" target="_self">
                <div class="car">
                    <span>2</span>
                </div>
            </a>

        </div>
    </div>
    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <!-- 使用Swiper的轮播组件 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./uploads/banner1.png"></div>
                    <div class="swiper-slide"><img src="./uploads/banner1.png"></div>
                    <div class="swiper-slide"><img src="./uploads/banner1.png"></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>

            <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="#">生鲜果蔬<span>水果 蔬菜</span></a></li>
                    <li><a href="#">美食推荐<span>面包 干果</span></a></li>
                    <li><a href="#">数码电子<span>手机 电脑</span></a></li>
                    <li><a href="#">家庭电器<span>电视 冰箱</span></a></li>
                    <li><a href="#">厨房用品<span>厨房电器 餐具</span></a></li>
                    <li><a href="#">居家生活<span>床品 四件套 被枕</span></a></li>
                    <li><a href="#">洗护美妆<span>洗发 洁面 美妆</span></a></li>
                    <li><a href="#">孕婴用品<span>奶粉 玩具 服装</span></a></li>
                    <li><a href="#">服饰穿搭<span>女装 男装</span></a></li>
                    <li><a href="#">日用杂货<span>户外 图书</span></a></li>
                </ul>
            </div>
            <script>
                var swiper = new Swiper('.swiper-container', {
                    autoplay: true,
                    spaceBetween: 30,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
            </script>
        </div>
    </div>

    <!-- 新鲜好物 -->
    <div class="backgro2">
        <div class="goods wrapper">
            <!-- hd header 头部 -->
            <div class="hd">
                <h2>25216950527梁晋华<span>新鲜出炉 品质靠谱</span></h2>
                <a href="#">查看全部</a>
            </div>
            <!-- body 身体, 内容 -->
            <div class="bd clearfix">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./uploads/goods1.png" alt="">
                            <h3>KN95级莫兰迪色防护口罩</h3>
                            <div>￥<span>79</span></div>
                            <b>新品</b>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/goods2.png" alt="">
                            <h3>紫檀外独板三层普洱茶盒</h3>
                            <div>￥<span>566</span></div>
                            <b>新品</b>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/goods3.png" alt="">
                            <h3>法拉蒙高颜值记事本可定制</h3>
                            <div>￥<span>58</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/goods4.png" alt="">
                            <h3>科技布布艺沙发</h3>
                            <div>￥<span>3579</span></div>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <!-- 新鲜好物 -->
    <div class="backgro2">
        <div class="goods wrapper">
            <!-- hd header 头部 -->
            <div class="hd">
                <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
                <a href="#">查看全部</a>
            </div>
            <!-- body 身体, 内容 -->
            <div class="bd clearfix bd2">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./uploads/recommend1.png" alt="">
                            <h3>特惠推荐</h3>
                            <!-- <div>￥<span>899</span></div> -->
                            <h4>我猜得到 你的需要</h4>
                        </a>
                        <!-- 轮播图 -->
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/recommend2.png" alt="">
                            <h3>爆款推荐</h3>
                            <!-- <div>￥<span>3299</span></div> -->
                            <h4>人气好物推荐</h4>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/recommend3.png" alt="">
                            <h3>节日礼品一站买全</h3>
                            <!-- <div>￥<span>28</span></div> -->
                            <h4>编辑尽心整理推荐</h4>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/recommend4.png" alt="">
                            <h3>鲜花园艺</h3>
                            <!-- <div>￥<span>4299</span></div> -->
                            <h4>给生活增加仪式感</h4>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <!-- 衣物 -->

    <div class="backgro2">
        <div class="shengxian wrapper">
            <div class="hd">
                <h2>服装</h2>
                <a href="#" class="more">查看全部</a>
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">奢侈品</a></li>
                    <li><a href="#">裤装</a></li>
                    <li><a href="#">衬衫</a></li>
                    <li><a href="#">T恤</a></li>
                    <li><a href="#">内衣</a></li>
                </ul>
            </div>
            <div class="bd clearfix">
                <div class="left">
                    <a href="#"><img src="./uploads/colthes_left.png" alt=""></a>
                    <div class="Floating">
                        <span>靓丽</span>
                        <span>时尚百搭</span>
                    </div>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/clothes1.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>双味千层，手抓饼烤肉组合</p>
                                    <p>￥719</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/clothes2.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>云南甘蔗慢熬红糖馒头</p>
                                    <p>￥699</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/clothes3.png" alt=""></div>

                                <div class="right-bottom">
                                    <P>日式风味小圆饼</P>
                                    <P>￥229</P>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/clothes4.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>全麦奶油浓香小面包</p>
                                    <p>￥14.5</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/clothes5.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>秘制外皮五福摩提大福点心</p>
                                    <p>￥179</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/clothes6.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>水果面膜韩国蜂蜜柚子茶</p>
                                    <p>￥565</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/clothes7.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>浓情比利时巧克力礼盒装</p>
                                    <p>￥99.99</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/clothes8.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>抹茶奶油小蛋糕礼盒装</p>
                                    <p>￥269</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 餐厨 -->
    <div class="backgro2">
        <div class="shengxian wrapper">
            <div class="hd">
                <h2>餐厨</h2>
                <a href="#" class="more">查看全部</a>
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">厨具</a></li>
                    <li><a href="#">水具</a></li>
                    <li><a href="#">灯具</a></li>
                    <li><a href="#">五金</a></li>
                    <li><a href="#">家装材料</a></li>
                    <li><a href="#">居家用品</a></li>
                </ul>
            </div>
            <div class="bd clearfix">
                <div class="left">
                    <a href="#"><img src="./uploads/kitchen_left.png" alt=""></a>
                    <div class="Floating">
                        <span>餐厨</span>
                        <span>智能生活</span>
                    </div>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/kitchen1.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>双味千层，手抓饼烤肉组合</p>
                                    <p>￥210</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/kitchen2.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>云南甘蔗慢熬红糖馒头</p>
                                    <p>￥32.99</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/kitchen3.png" alt=""></div>

                                <div class="right-bottom">
                                    <P>日式风味小圆饼</P>
                                    <P>￥30</P>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/kitchen4.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>全麦奶油浓香小面包</p>
                                    <p>￥69.99</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/kitchen5.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>秘制外皮五福摩提大福点心</p>
                                    <p>￥99.99</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/kitchen6.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>水果面膜韩国蜂蜜柚子茶</p>
                                    <p>￥35</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/kitchen7.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>浓情比利时巧克力礼盒装</p>
                                    <p>￥12.99</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/kitchen8.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>抹茶奶油小蛋糕礼盒装</p>
                                    <p>￥56.99</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 生鲜 -->
    <div class="backgro2">
        <div class="shengxian wrapper">
            <div class="hd">
                <h2>生鲜</h2>
                <a href="#" class="more">查看全部</a>
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">蔬菜</a></li>
                    <li><a href="#">肉禽蛋</a></li>
                    <li><a href="#">水果</a></li>
                    <li><a href="#">海鲜</a></li>
                    <li><a href="#">零食</a></li>
                    <li><a href="#">饮料</a></li>
                </ul>
            </div>
            <div class="bd clearfix">
                <div class="left">
                    <a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
                    <div class="Floating">
                        <span>生鲜</span>
                        <span>新鲜品质</span>
                    </div>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/fresh1.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>双味千层，手抓饼烤肉组合</p>
                                    <p>￥89.99</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/fresh2.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>云南甘蔗慢熬红糖馒头</p>
                                    <p>￥9.99</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/fresh3.png" alt=""></div>

                                <div class="right-bottom">
                                    <P>日式风味小圆饼</P>
                                    <P>￥588</P>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/fresh4.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>全麦奶油浓香小面包</p>
                                    <p>￥69</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/fresh5.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>秘制外皮五福摩提大福点心</p>
                                    <p>￥39.99</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/fresh6.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>水果面膜韩国蜂蜜柚子茶</p>
                                    <p>￥89.99</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/fresh7.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>浓情比利时巧克力礼盒装</p>
                                    <p>￥120</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="right-top"><img src="./uploads/fresh8.png" alt=""></div>

                                <div class="right-bottom">
                                    <p>抹茶奶油小蛋糕礼盒装</p>
                                    <p>￥60</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <!-- 版权区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <span>物流快捷</span>
                    </li>
                    <li>
                        <span>品质新鲜</span>
                    </li>
                    <li>
                        <span>售后无忧</span>
                    </li>
                </ul>
            </div>
            <div class="footer-content">
                <div class="footer-section">
                    <h3>购物指南</h3>
                    <ul>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">支付方式</a></li>
                        <li><a href="#">售后规则</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>配送方式</h3>
                    <ul>
                        <li><a href="#">配送运费</a></li>
                        <li><a href="#">配送范围</a></li>
                        <li><a href="#">配送时间</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <ul>
                        <li><a href="#">平台规则</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">问题反馈</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>售后服务</h3>
                    <ul>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">退款说明</a></li>
                        <li><a href="#">取消订单</a></li>
                    </ul>
                </div>
                <div class="footer-section service-hotline">
                    <h3>服务热线</h3>
                    <ul>
                        <li><a href="#">在线客服</a></li>
                        <li>客服电话 <strong>400-0000-000</strong></li>
                        <li>工作时间 <strong>周一至周日 8:00-18:00</strong></li>
                    </ul>
                </div>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a>
                </p>
                <p>CopyRight © 小兔鲜</p>
            </div>
        </div>
    </div>
    <!-- 嘿嘿 -->
    <script type="text/javascript">
        $(function () {
            $(".b2").mouseenter(function () {
                $(".b1").stop().fadeTo(0, 1);
            })
            $(".b2").mouseleave(function () {
                $(".b1").stop().fadeTo(0, 0);
            })

        })
    </script>
</body>

</html>